<template>
  <div class="relic">
    <Header></Header>
    <div class="container">
      <div class="content">
        <div class="back">
          <a href="javascript:history.back(-1);" class="return">
            <span> <img src="../../assets/images/return.png" /> </span
            >返回上一页
          </a>
        </div>
        <div class="item">
          <div class="itemImg">
            <img :src="getImageUrl(relic.image)" alt="" />
            <div class="save" @click="collectionRelic(relic)">
              <i class="iconfont icon-shoucang"></i>
            </div>
          </div>
          <div class="itemBody">
            <div class="item_attribute">
              <span>{{ relic.name }}</span>
            </div>
            <div class="item_attribute">
              <span>分类</span>
              <span>{{ relic.groupType }}</span>
            </div>
            <div class="item_attribute">
              <span>年代</span>
              <span>{{ relic.decadeType }}</span>
            </div>
            <div class="item_attribute">
              <span>地域</span>
              <span>{{ relic.localType }}</span>
            </div>
          </div>
        </div>
        <div class="subject_container">
          <div v-if="relic.pattern" class="subject_item">
            <div class="subject_title">图案与纹样</div>
            <span v-for="(item, index) in pattern" :key="index">{{
              item
            }}</span>
          </div>
          <div v-if="relic.types" class="subject_item">
            <div class="subject_title">物件类型</div>
            <span v-for="(item, index) in types" :key="index">{{ item }}</span>
          </div>
          <div v-if="relic.technology" class="subject_item">
            <div class="subject_title">制作工艺</div>
            <span>{{ relic.technology }}</span>
          </div>
          <div class="subject_item">
            <div v-if="relicList.length != 0" class="subject_title">
              相关推荐
            </div>
            <div
              v-for="(item, index) in relicList"
              :key="index"
              class="subject_image"
            >
              <div
                class="imageItem"
                :style="{ backgroundImage: `url(${getImageUrl(item.image)})` }"
                @click="getRelic(item, $event)"
              >
                <div class="imageName">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/head.vue";
import Footer from "@/components/footer.vue";
import { collectionRelic, Recommend } from "@/api/all";
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      relic: {},
      pattern: [],
      types: [],
      relicList: [],
    };
  },
  created() {
    this.relic = JSON.parse(this.$route.query.relic);
  },
  mounted() {
    this.splitData();
    //获取相关推荐的文物
    this.recommend();
  },
  methods: {
    getImageUrl(imageName){
      const prefix =this.$imagePrefix
      console.log(prefix)
      return `${prefix}${imageName}`;  
    },
    getRelic(relic, event) {
      if (this.showOptions) event.preventDefault();
      else {
        let routeData = this.$router.resolve({
          name: "Relic",
          query: { relic: JSON.stringify(relic) },
        });
        window.open(routeData.href, "_blank");
      }
    },
    splitData() {
      if (this.relic.pattern) this.pattern = this.relic.pattern.split(",");
      if (this.relic.types) this.types = this.relic.types.split(",");
    },
    async recommend() {
      let params = {
        name: this.relic.name,
        groupType: this.relic.groupType,
      };
      await Recommend(params)
        .then((res) => {
          if (res.data.code === 200) {
            this.relicList = res.data.data.relicList;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    async collectionRelic(item) {
      let params = {
        id:0,
        rid: item.rid,
        uid: this.$store.state.login.uid,
      };
      await collectionRelic(params)
        .then((res) => {
          if(res.data.message==="Ok"){
            this.$message.success("收藏成功");
          }
          else{
            this.$message.error("您已经收藏过该文物，无需重复收藏！")
          }
        })
        .catch((error) => {
          console.log(error)
        });
    },
  },
};
</script>

<style scoped>
.relic {
  background-color: #e5e5e5;
  display: flex;
  flex-direction: column;
  height: auto;
}
.back {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  display: flex;
  /* justify-content: center; */
  font-size: 16px;
  color: #969595;
  text-align: center;
  padding-left: 20px;
  vertical-align: middle;
  margin-top: 10px;
}
.back a span img {
  width: 20px;
  display: block;
  margin: 0 auto;
  margin-top: 4px;
}
.return {
  color: #969595;
}
.back a span {
  width: 15px;
  height: 30px;
  background-color: #fff;
  border-radius: 100px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
  overflow: hidden;
  color: #969595;
}
.container {
  width: 80%;
  margin: 0px auto;
  background-color: #ffffff;
}
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.item_attribute {
  display: flex;
}
.itemImg {
  margin-left: 100px;
  position: relative;
}
.itemImg img {
  width: 100%;
  height: 100%;
}
.itemBody {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  height: 100%;
  width: 50%;
  padding-top: 2px;
  text-align: start;
  margin-left: 200px;
  color: #999999;
}
.item_attribute:nth-child(1) {
  font-weight: bold;
  font-size: 25px;
  color: #333333;
  display: flex;
  margin-bottom: 10px;
  margin-left: -5px;
}
.item_attribute:nth-child(1) span {
  font-size: 25px;
  width: 100%;
}
.item_attribute span {
  display: block;
  margin: 10px 0px;
  text-align: start;
  width: 100px;
  font-size: 16px;
  font-weight: bold;
}
.item_attribute span:nth-child(2) {
  color: #222222;
  font-size: 17px;
  font-weight: normal;
}
.item {
  display: flex;
  align-items: center;
  font-size: 20px;
  width: 100%;
  margin: 0px auto;
  height: 100%;
  padding: 20px 100px;
}
.subject_container {
  display: flex;
  flex-direction: column;
}
.subject_item {
  font-size: 15px;
  width: 100%;
  padding: 10px 100px;
}
.subject_title {
  font-size: 18px;
  color: #4d4d4d;
  font-weight: bold;
  padding: 10px 0px;
}
.subject_item:nth-child(2) span {
  margin: 5px 7px;
  padding: 5px 12px;
  display: inline-block;
  border-radius: 10px;
  color: #7676a0;
  border: 1px solid #7676a0;
}
.subject_item:nth-child(3) span {
  margin: 5px 7px;
  padding: 5px 12px;
  display: inline-block;
  border-radius: 10px;
  color: #429e94;
  border: 1px solid #429e94;
}
.subject_item:nth-child(1) span {
  margin: 5px 7px;
  padding: 5px 12px;
  display: inline-block;
  border-radius: 10px;
  color: #99996c;
  border: 1px solid #99996c;
}
.subject_item:nth-child(1) span:hover {
  color: #e5e5e5;
  background: #99996c;
}
.subject_item:nth-child(2) span:hover {
  color: #e5e5e5;
  background: #7676a0;
}
.subject_item:nth-child(3) span:hover {
  color: #e5e5e5;
  background: #429e94;
}
.save {
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  line-height: 27px;
  color: rgba(164, 174, 173, 0.4);
  position: absolute;
  bottom: 10px;
  right: -30px;
}
.save:hover {
  cursor: pointer;
  color: rgba(160, 33, 54, 0.7);
}
.subject_image {
  display: inline-block;
}
.imageItem {
  display: flex;
  position: relative;
  width: 110px;
  height: 120px;
  background-size: cover;
  background-position: center;
  margin: 10px 10px;
  overflow: hidden;
}
.imageItem .imageName {
  display: inline-block;
  font-size: 12px;
  width: 110px;
  height: 120px;
  color: #ffffff;
  text-align: center;
  background: rgba(17, 17, 17, 0.6);
  padding: 0px 5px;
  padding-top: 10px;
  position: absolute;
  top: 100%;
  transition: all 0.5s;
}
.imageItem:hover .imageName {
  top: 0%;
}
</style>